<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码数据生成器</title>
    <style type="text/css"></style>
    <script src="./js/vue@2.6.12.js"></script>
    <script src="./js/axios.min.js"></script>
    <link rel="stylesheet" href="./js/index.css">
    <script src="./js/index.js"></script>
    <script src="./js/mock.js"></script>
    <script type="text/javascript"></script>
    <link href="./js/jsoneditor.min.css" rel="stylesheet" type="text/css">
    <script src="./js/jsoneditor.min.js"></script>
    <script src="./js/clipboard.js"></script>
    <style type="text/css">
        .container{

        }

        #base .el-input ,#base span{
            width: 9rem;
            color: #1f3435;
        }
        #base>div>div{
            margin-top: 1rem;
        }
        .select .el-select{
            width: 80%;
        }
        .option>div{
            margin: 6px 12px;
        }

    </style>
</head>
<body>
<div id="app">
    <el-row  :gutter="20">
        <el-col :offset="1"  :span="9"  :xs="{span:24,offset: 0}" class="container">
            <h2>基本配置</h2>
            <div class="grid-content bg-purple-dark">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="基础配置" id="base">
                        <div style="display: flex;flex-wrap: wrap">
                            <div style="margin-right: 1rem">
                                <span style="margin-right: 0.2rem">作者</span>
                                <el-input v-model="form.author" placeholder="作者"></el-input  >
                            </div>
                           <div style="margin-right: 1rem">
                                <span style="margin-right: 0.2rem">包名</span>
                               <el-input v-model="form.package_dir" placeholder="包名"></el-input  >
                           </div>
                            <div style="margin-right: 1rem">
                                <span style="margin-right: 0.2rem">应用端口</span>
                                <el-input v-model="form.port" placeholder="应用端口"></el-input  >
                            </div>
                        </div>
                        <div style="display: flex">
                            <div style="margin-right: 1rem;display: flex">
                                <span style="margin-right: 0rem">注册中心地址</span>
                                <el-input v-model="form.registry" style="width: 100%;" placeholder="不使用分布式策略"></el-input  >
                            </div>
                        </div>
                        <div style="display: flex">
                            <div style="margin-right: 1rem">
                                <span style="margin-right: 0.2rem">表前缀</span>
                                <el-input v-model="form.t_prefix" placeholder="表前缀"></el-input  >
                            </div>
                            <div style="margin-right: 1rem">
                                <span style="margin-right: 0.2rem">配置文件夹名</span>
                                <el-input v-model="form.cfgName" placeholder="conf配置"></el-input  >
                            </div>
                        </div>
                        <div style="display: flex">
                            <div style="margin-right: 1rem">
                                <span style="margin-right: 0.2rem">common模块路径</span>
                                <el-input v-model="form.dis_mod_name" placeholder="公共类路径"></el-input  >
                            </div>
                            <div style="margin-right: 1rem">
                                <span style="margin-right: 0.2rem">feign服务名</span>
                                <el-input v-model="form.feignService" placeholder="x-user=>User大写"></el-input  >
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="生成模块" class="select">
                        <el-select v-model="form.module_name"  clearable placeholder="选择生成到模块" @change="selChange">
                            <div v-for="(item,index) in dirList ":key="index">
                                <el-option :label="item"  :value="item"></el-option>
                            </div>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="生成表" class="select">
                        <div style="display: flex;">
                            <el-select v-model="form.tables" clearable  multiple  placeholder="选择生成哪些表">
                                <div v-for="(item,index) in tableList ":key="index">
                                    <el-option :label="item"  :value="item"></el-option>
                                </div>
                            </el-select>
                            <div style=" margin-left: 1rem">
                                <el-switch v-model="form.allTable"></el-switch>
                                <span>默认全选</span>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="选项" >
                        <div  style="display: flex;flex-direction: row;flex-wrap: wrap" class="option">
                            <div style="display: flex;flex-direction: column ;">
                                <el-switch v-model="form.redis"></el-switch>
                                <span>redis</span>
                            </div>
                            <div style="display: flex;flex-direction: column ;">
                                <el-switch v-model="form.springCache"></el-switch>
                                <span>springCache</span>
                            </div>
                            <div style="display: flex;flex-direction: column ;">
                                <el-switch v-model="form.redisson"></el-switch>
                                <span>redisson</span>
                            </div>
                        </div>
                        <div  style="display: flex;flex-direction: row;flex-wrap: wrap" class="option">
                            <div style="display: flex;flex-direction: column ;">
                                <el-switch v-model="form.mybatis"></el-switch>
                                <span>mybatis</span>
                            </div>

                            <div style="display: flex;flex-direction: column ;">
                                <el-switch v-model="form.springTest"></el-switch>
                                <span>单元测试</span>
                            </div>

                            <div style="display: flex;flex-direction: column ;">
                                <el-switch v-model="form.cors"></el-switch>
                                <span>cors跨域</span>
                            </div>
                            <div style="display: flex;flex-direction: column ;">
                                <el-switch v-model="form.globalException"></el-switch>
                                <span>全局异<br>常处理</span>
                            </div>
                            <div style="display: flex;flex-direction: column ;">
                                <el-switch v-model="form.baseController"></el-switch>
                                <span>基础控制器</span>
                            </div>
                            <div style="display: flex;flex-direction: column ;">
                                <el-switch v-model="form.async"></el-switch>
                                <span>async</span>
                            </div>

                            <div style="display: flex;flex-direction: column ;">
                                <el-switch v-model="form.scheduled"></el-switch>
                                <span>scheduled</span>
                            </div>

                            <div style="display: flex;flex-direction: column ;">
                                <el-switch v-model="form.webSocket"></el-switch>
                                <span>websocket-<br>netty</span>
                            </div>
                        </div>
                        <div  style="display: flex;flex-direction: row;flex-wrap: wrap" class="option">
                            <div style="display: flex;flex-direction: column ;">
                                <el-switch v-model="form.nacos"></el-switch>
                                <span>使用了<br>(nacos)</span>
                            </div>
                            <div style="display: flex;flex-direction: column ;">
                                <el-switch v-model="form.openFeign"></el-switch>
                                <span>openFeign</span>
                            </div>
                            <div style="display: flex;flex-direction: column ;">
                                <el-switch v-model="form.disId"></el-switch>
                                <span>分布式id</span>
                            </div>
                            <div style="display: flex;flex-direction: column ;">
                                <el-switch v-model="form.distribution"></el-switch>
                                <span>common<br>结果集</span>
                            </div>
                            <div style="display: flex;flex-direction: column ;">
                                <el-switch v-model="form.rabbitMQ"></el-switch>
                                <span>rabbitMQ</span>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">立即生成</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
        <el-col :span="6" class="container" :xs="{span:24,offset: 0}">
            <div id="jsoneditor" style="width:100%; height:46vh;margin-bottom: 1rem"></div>
            <el-button type="primary" @click="onMock">生成数据并复制</el-button>
            <el-button type="primary" @click="copyMock">复制mock模板</el-button>
        </el-col>
        <el-col :span="4" class="container" :xs="{span:24,offset: 0}" >
            <span>生成实体类json</span>
            <el-select v-model="showEntity" placeholder="json生成" @change="refresh">
                <div v-for="(item,index) in entityList" :key="index" >
                    <el-option   :label="item" :value="item"></el-option>
                </div>
            </el-select>
            <pre class="clp" style="font-size: .9rem;margin-top: 1rem">{{showMock}}</pre>
        </el-col>
    </el-row>

</div>
<script type="module">
new Vue({
    el: '#app', //
    data: {
        editor:undefined,
        // mock
        mockList:[],
        dirList: [],
        tableList: [],
        entityList: [],
        showMock: '',
        showEntity: '',
        template:{
            "categoryId":"@natural(60, 10000)",
            "icon":"@url",
            "title":"@cname",
            showStatus:"@natural(60, 10000)",
            createTime:"@date",
            readCount: "@natural(60, 10000)",
            content: "@cparagraph"
        },
        //
        config: {
            port: undefined,
            module_name: undefined,
            author: undefined,
            registry:undefined,
            package_dir:undefined,
            t_prefix: undefined,
            cfgName: "conf",
            dis_mod_name: "",
            allTable: false,
            feignService:undefined
        },
        form: {
            port: "8080",
            tables:[],
            module_name: "请选择生成模块",
            author:"aj",
            registry:"110.40.229.220:8848",
            package_dir:"source",
            t_prefix: "t_",
            cfgName: "conf",
            allTable: false,
            dis_mod_name: "common生成模块",
            feignService:"User",
            redis: false,
          openFeign:false,
            disId: false,
            mybatis: true,
            cors: true,
            distribution: false,
            nacos: false,
            springCache: false,
            redisson: false,
            async:false,
          scheduled:false,
            springTest: true, // 使用单元测试
            rabbitMQ: false, // 使用消息队列
            globalException: false, // 使用全局异常
            baseController: false, // 使用基础控制器
            webSocket: false// 使用websocket netty
        }
    },
    methods: {
      onMock(){
           let obj = this.editor.get()
            Object.keys(obj).forEach(k=>{
              if(obj[k] !== null){
                if(obj[k].match("/.*/") !== null){
                  const temp = obj[k].substr(1,obj[k].length-2)
                  obj[k] = new RegExp(temp)
                }
              }
            })
           this.showMock = Mock.mock(obj)
           this.copy(JSON.stringify(this.showMock));
           this.$message({ type: 'sucess',  message: '已复制到剪切板',duration: 300})
      },
      copyMock(){
           let str = JSON.stringify(this.template).replace(/(["|l]),/g,"$1,\n")
           this.copy(str)
           this.$message({ type: 'sucess',  message: '已复制模板到剪切板' ,duration: 300})
      },
      selChange(){
        this.getEntityList()
      },
        refresh(){
          axios({
            url:  `http://localhost:9999/entity?moduleName=${this.form.module_name}&pack=${this.form.package_dir}&className=${this.showEntity}`,
            method: "get"
          }).then((res)=>{
            this.template = res.data.data.entity
            this.editor.set(this.template)
          })
        },
        //
        onSubmit(){
            this.$confirm('确认提交?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                this.setCfg()
                this.$message({ type: 'sucess',  message: '已生成代码'    })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });})
            },
        setCfg(){
            Object.assign(this.config,this.form)
            if (this.form.allTable){
                Object.assign(this.config,{tables: this.tableList})
            }
          console.log(this.config)
            axios.post('setCfg',this.config)
                .then(function (response) {
                    console.log(response.data.data)
                }).catch(function (error) {
                console.log(error);
            })
        },
      getEntityList(){
        axios({
          url:  `http://localhost:9999/entity/dir?moduleName=${this.form.module_name}&pack=${this.form.package_dir}`,
          method: "get"
        }).then((response)=>{
          this.entityList =response.data.data;
        })
      },
      copy(content){
        // 创建元素用于复制
        const ele = document.createElement('input')
        // 设置元素内容
        ele.setAttribute('value', content)
        // 将元素插入页面进行调用
        document.body.appendChild(ele)
        // 复制内容
        ele.select()
        // 将内容复制到剪贴板
        document.execCommand('copy')
        // 删除创建元素
        document.body.removeChild(ele)
        }
    },
    mounted(){
        // create the editor
        const container = document.getElementById("jsoneditor")
        const options = {}
        this.editor = new JSONEditor(container, options)
        this.clipboard = new ClipboardJS('.clp')
          console.log(this.clipboard)
        let _this=this
        // 上面的请求也可以这样做
        axios.get('/dir')
            .then(function (response) {
                _this.dirList=response.data.data
            }).catch(function (error) {
            console.log(error);
        })
        axios.get('getCfg')
            .then(function (response) {
                Object.assign(_this.config,response.data.data.config)
                _this.tableList=response.data.data.config.tables
            }).catch(function (error) {
            console.log(error);
        })
    }
})
</script>
</body>
</html>
